<template>
  <div class="tab-container waybill-tab-container tab-fixed">
    <el-card shadow="never">
      <el-row :gutter="6">
        <span>合单备注</span>
      </el-row>
    </el-card>
    <el-card shadow="never">
      <el-row :gutter="6">
        <el-form
          ref="orderForm"
          :model="orderData"
          size="mini"
          label-width="60px"
        >
          <el-col :span="4">
            <!-- <el-form-item label="渠道" prop="inStockChannel">
              <el-select
                v-model="orderData.inStockChannel"
                placeholder="请选择下拉选择渠道"
                multiple
                clearable
                filterable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(k, v) in inStockChannelOptions"
                  :key="v"
                  :label="v"
                  :value="parseInt(k)"
                ></el-option>
              </el-select>
            </el-form-item> -->
          </el-col>
          <el-col :span="4">
            <el-form-item label="仓库代码" prop="dispatchAddressCode">
              <el-input
                v-model="orderData.dispatchAddressCode"
                placeholder="请输入仓库代码"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="追踪号" prop="trackNumber">
              <el-input
                v-model="orderData.trackNumber"
                placeholder="请输入追踪号"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="客户" prop="customerShortName ">
              <el-input
                v-model="orderData.customerShortName"
                placeholder="请输入客户"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="销售" prop="salesmanId">
              <el-select
                v-model="orderData.salesmanId"
                placeholder="请选择销售"
                clearable
                filterable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(k, v) in userOptions"
                  :key="v"
                  :label="userOptions[v]"
                  :value="parseInt(v)"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="客服" prop="servicesId">
              <el-select
                v-model="orderData.servicesId"
                placeholder="请选择客服"
                clearable
                filterable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(k, v) in userOptions"
                  :key="v"
                  :label="userOptions[v]"
                  :value="parseInt(v)"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="运单号" prop="waybillNos">
              <el-input
                v-model="orderData.waybillNos"
                type="textarea"
                placeholder="请输入运单号"
                :autosize="{ minRows: 1, maxRows: 6 }"
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="创建来源" prop="ordersByFba">
              <el-select
                v-model="orderData.ordersByFba"
                placeholder="请选择运单创建来源"
                clearable
                filterable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(k, v) in ordersSourceOptions"
                  :key="v"
                  :label="m(ordersSourceOptions[v])"
                  :value="parseInt(v)"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="">
              <el-button
                type="primary"
                icon="el-icon-search"
                size="mini"
                @click="initPageData"
              >
                搜索
              </el-button>
              <el-button type="primary" style="margin-left:20px;" size="mini" @click="reset">
                重置
              </el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </el-card>
    <el-card shadow="never">
      <el-row>
        <el-form
          ref="remarkForm"
          :model="remarkData"
          size="mini"
          label-width="100px"
        >
          <el-col :span="8">
            <el-form-item label="系统内部备注：" prop="sysRemark">
              <el-input
                v-model="remarkData.sysRemark"
                placeholder="系统内部备注"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="运单状态："  prop="ordersByFba">
              <el-select
                v-model="remarkData.waybillStatus"
                placeholder="请选择运单状态"
                clearable
                filterable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(k, v) in waybillStatusOptions"
                  :key="m(waybillStatusOptions[v])"
                  :label="m(waybillStatusOptions[v])"
                  :value="parseInt(v)"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="异常内容："  prop="ordersByFba">
              <el-select
                v-model="remarkData.anomalyCn"
                placeholder="请选择异常内容"
                clearable
                filterable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(k, v) in flowNodeAnomalyOptions[remarkData.waybillStatus]"
                  :key="k"
                  :label="k"
                  :value="k"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item style="margin-left:-10px;" label="是否发送通知:">
              <template>
                <el-checkbox-group
                  v-model="remarkData.receiveType"
                  size="medium"
                >
                  <el-checkbox label="0">销售</el-checkbox>
                  <el-checkbox label="1">客服</el-checkbox>
                  <el-checkbox label="2">客户</el-checkbox>
                </el-checkbox-group>
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="是否同步到轨迹:" style="margin-left:20px;" prop="synTrace">
              <el-radio-group v-model="remarkData.synTrace" size="medium">
                <el-radio
                  v-for="(item, index) in synTraceOptions"
                  :key="index"
                  :label="item.value"
                  :disabled="item.disabled"
                  >{{ item.label }}</el-radio
                >
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="消息类型:" prop="urgencytype">
              <el-radio-group v-model="remarkData.urgencytype" size="medium">
                <el-radio
                  v-for="(item, index) in urgencytypeOptions"
                  :key="index"
                  :label="item.value"
                  :disabled="item.disabled"
                  >{{ item.label }}</el-radio
                >
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-form-item label="" style="margin-left:340px;" prop="field105">
              <!-- <template slot-scope="scope"> -->
              <el-button type="primary" size="mini" @click="saveRemark()">
                保存备注
              </el-button>
              <!-- </template> -->
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </el-card>
    <el-card shadow="never">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="30"> </el-table-column>
        <el-table-column prop="waybillNo" label="运单号" width="180">
        </el-table-column>
        <el-table-column prop="inStockTotalPackages" label="件数" width="180">
        </el-table-column>
        <el-table-column prop="inStockChannelName" label="渠道" width="180">
        </el-table-column>
        <el-table-column
          prop="dispatchAddressCode"
          label="仓库代码"
          width="180"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.dispatchAddressCode === null">海外仓</span>
            <span v-if="scope.row.dispatchAddressCode != null">{{
              scope.row.dispatchAddressCode
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="trackNumber" label="追踪号" width="180">
          <template slot-scope="scope">
            <span v-if="scope.row.trackNumber === null">卡车派送</span>
            <span v-else>{{ scope.row.trackNumber }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="customerId" label="客户名称">
          <template slot-scope="scope">
            {{ customerOptions[scope.row.customerId] }}
          </template>
        </el-table-column>
        <el-table-column prop="salesmanId" label="销售" width="180">
          <template slot-scope="scope">
            {{ userOptions[scope.row.salesmanId] }}
          </template>
        </el-table-column>
        <el-table-column prop="servicesId" label="客服" width="180">
          <template slot-scope="scope">
            {{ userOptions[scope.row.servicesId] }}
          </template>
        </el-table-column>
        <el-table-column prop="ordersByFba" label="运单创建来源" width="180">
          <template slot-scope="scope">
            {{ m(ordersSourceOptions[scope.row.ordersByFba]) }}
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
<script>
import { ajax } from "@/store/yg/common/utils";
import * as constant from "@/store/yg/common/constant";
import axios from "axios";
import { m } from "@/store/yg/common/local";

export default {
  props: ["row", "data", "more"],
  data() {
    return {
      tableData: [
        {
          id: "",
          waybillNo: "",
          inStockTotalPackages: 0,
          inStockChannel: 0,
          dispatchAddressCode: "",
          trackNumber: "",
          customerId: "",
          salesmanId: "",
          servicesId: "",
          sysRemark: "", //系统备注
          receiveType: "", //发送通知
          synTrace: 0, //是否同步轨迹
          urgencytype: 0 //消息类型
        }
      ],

      orderData: {
        inStockChannel: [],
        dispatchAddressCode: "",
        trackNumber: "",
        customerShortName: "",
        salesmanId: "",
        servicesId: "",
        waybillNos: "",
        ordersByFba: "",
        waybillId: 0
      },
      remarkData: {
        //提交表单
        id: "",
        sysRemark: "",
        receiveType: ["0", "1"],
        waybillStatus: "",//运单状态
        anomalyCn: "",//异常内容
        synTrace: 0,
        urgencytype: 0
      },
      optionsData: {},
      customerOptions: {},
      inStockChannelOptions: {},
      userOptions: {},
      ordersSourceOptions: {},
      waybillStatusOptions: {},
      flowNodeAnomalyOptions: {},
      multipleSelection: [],
      receiveTypeOptions: [
        {
          label: "销售",
          value: 0
        },
        {
          label: "客服",
          value: 1
        }
      ],
      synTraceOptions: [
        {
          label: "否",
          value: 0
        },
        {
          label: "是",
          value: 1
        }
      ],
      urgencytypeOptions: [
        {
          label: "红",
          value: 0
        },
        {
          label: "黄",
          value: 1
        },
        {
          label: "灰",
          value: 2
        }
      ]
    };
  },
  computed: {},
  watch: {},
  created() {},
  remarkForm: {
    sysRemark: ""
  },
  // rules: {
  //   //非空校验
  //   sysRemark: [
  //     { required: true, message: "请输入系统内部备注", trigger: "blur" }
  //   ]
  // },
  mounted() {
    // this.init()
    this.initCustomerOptions("customerSource");
    this.initUserOptions("userSource");
    this.initChannelOptions("customerChannelSource");
    this.initOrdersSourceOptions("ordersSourceSource");
    this.initWaybillStatusOptions("waybillStatusSource");
    this.initFlowNodeAnomalyOptions("flowNodeAnomalyByStatusSource");
    this.initPageData();
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    reset() {
      this.orderData = {};
      this.initPageData();
    },
    initCustomerOptions(bean) {
      var uri = "/api/entry/source?bean=" + bean;
      axios.post(constant.API_SERVER + uri).then(
        response => {
          this.customerOptions = response.data;
        },
        error => {
          console.info(error);
        }
      );
    },
    initUserOptions(bean) {
      var uri = "/api/entry/source?bean=" + bean;
      axios.post(constant.API_SERVER + uri).then(
        response => {
          this.userOptions = response.data;
        },
        error => {
          console.info(error);
        }
      );
    },
    initChannelOptions(bean) {
      var uri = "/api/entry/source?bean=" + bean;
      axios.post(constant.API_SERVER + uri).then(
        response => {
          this.inStockChannelOptions = response.data;
        },
        error => {
          console.info(error);
        }
      );
    },
    initOrdersSourceOptions(bean) {
      var uri = "/api/entry/source?bean=" + bean;
      axios.post(constant.API_SERVER + uri).then(
        response => {
          this.ordersSourceOptions = response.data;
        },
        error => {
          console.info(error);
        }
      );
    },
    initWaybillStatusOptions(bean) {
      var uri = "/api/entry/source?bean=" + bean;
      axios.post(constant.API_SERVER + uri).then(
        response => {
          this.waybillStatusOptions = response.data;
        },
        error => {
          console.info(error);
        }
      );
    },
    initFlowNodeAnomalyOptions(bean) {
      var uri = "/api/entry/source?bean=" + bean;
      axios.post(constant.API_SERVER + uri).then(
        response => {
          this.flowNodeAnomalyOptions = response.data;
        },
        error => {
          console.info(error);
        }
      );
    },
    m(k) {
      return m(k);
    },
    saveRemark() {
      const waybillIds = [];
      if (this.multipleSelection.length < 1) {
        this.$message.error("未选择任何分单，无法添加备注");
        return;
      } else {
        for (let index = 0; index < this.multipleSelection.length; index++) {
          waybillIds.push(this.multipleSelection[index].id); //获取到选中的ID
        }
      }
      var param = {};
      param = this.remarkData;
      for (let k in this.waybillStatusOptions){
        if (parseInt(k)===this.remarkData.waybillStatus){
          param["waybillStatusCn"] = m(this.waybillStatusOptions[k]);
        }
      }
      param["waybillMergeId"] = this.$route.query.waybillId;
      // param["waybillArray"] = this.multipleSelection;
      param["waybillIds"] = waybillIds;
      ajax("saveWaybillMergeSysRemark", param).then(
        res => {
          if (res.code != 200) {
            this.$message.error(res.message);
          } else {
            // this.tableData = res.data["list"];
            this.$message.success("保存成功");
          }
        },
        error => {
          console.log(error);
        }
      );
    },
    getFindKey(value, obj, me) {
      let objlist = JSON.parse(JSON.stringify(obj));
      delete objlist.me;
      let findKey = (value, compare = (a, b) => a === b) => {
        return Object.keys(objlist).find(k => compare(objlist[k], value));
      };
      return findKey(value);
    },
    initPageData() {
      var param = {};
      const waybillId = this.$route.query.waybillId;
      console.info("waybillId:", waybillId);
      param["waybillId"] = waybillId;
      if (this.orderData.waybillNos) {
        param["waybillNos"] = this.orderData.waybillNos;
      } else {
        param["waybillNos"] = "";
      }
      if (this.orderData.inStockChannel) {
        param["inStockChannel"] = this.orderData.inStockChannel;
      } else {
        param["inStockChannel"] = [];
      }
      if (this.orderData.dispatchAddressCode) {
        param["dispatchAddressCode"] = this.orderData.dispatchAddressCode;
      } else {
        param["dispatchAddressCode"] = "";
      }
      if (this.orderData.trackNumber) {
        param["trackNumber"] = this.orderData.trackNumber;
      } else {
        param["trackNumber"] = "";
      }
      if (this.orderData.servicesId) {
        param["servicesId"] = this.orderData.servicesId;
      } else {
        param["servicesId"] = "";
      }
      if (this.orderData.salesmanId) {
        param["salesmanId"] = this.orderData.salesmanId;
      } else {
        param["salesmanId"] = "";
      }
      if (this.orderData.customerShortName) {
        param["customerShortName"] = this.orderData.customerShortName;
      } else {
        param["customerShortName"] = "";
      }
      if (this.orderData.ordersByFba.length === 0) {
        param["ordersByFba"] = "";
      } else {
        param["ordersByFba"] = this.orderData.ordersByFba;
      }
      ajax("waybillMergeSysRemark", param).then(
        res => {
          if (res.code != 200) {
            this.$message.error(res.message);
          } else {
            this.tableData = res.data["list"];
            for (const i of this.tableData) {
              i.inStockChannelName = this.getFindKey(
                i.inStockChannel,
                this.inStockChannelOptions
              );
            }
          }
        },
        error => {
          console.log(error);
        }
      );
    }
  }
};
</script>
<style lang="scss" scoped>
.title-icon {
  display: inline-block;
  width: 120px;
}
</style>

<style scoped>
.el-card {
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 5px;
  margin-right: 5px;
}

/deep/ .el-tabs__item.is-disabled {
  color: #51abd1;
}
</style>
